<template>
	<view>
		<back title="申请售后"></back>
		<view class="order_info_box" :style="background">
			
			<view class="order_inof_other_top">
				<view class="other_top_left">
					<span v-if="order_info.status==0">代付款</span>
					<span v-if="order_info.status==0" class="left_time">
						支付剩余时间 
						<u-count-down style="margin-left: 10rpx;" color="#000" font-size="20rpx" bg-color="rgba(0,0,0,0)" :timestamp="order_info.surplus_time"></u-count-down>
					</span>
					<span v-if="order_info.status==1">待发货</span>
					<span v-if="order_info.status==2">退款中</span>
					<span v-if="order_info.status==3">已退款</span>
					<span v-if="order_info.status==4">已发货</span>
					<span v-if="order_info.status==5">已收货</span>
					<span v-if="order_info.status==6">已完成</span>
					<span v-if="order_info.status==7">已关闭</span>
					<span class="left_time">请选择售后方式</span>
				</view>
				<image style="width: 80rpx;" src="../../static/vip/icon_34.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="shop_info_box" style="">
			<view class="" style="border-radius: 12rpx; background-color: #fff; overflow: hidden;"> 
				<view v-for="(item,index) in order_info.order_spec" :key="index" class="shop_info">
					<u-image :src="item.goods_data.pic" @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_data.id}`)" width="150rpx" height="150rpx" mode="aspectFit"></u-image>
					<view style="height: 124rpx;" @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_data.id}`)" class="shop_info_right">
						<view class="shop_info_title uni-ellipsis">
							{{item.goods_data.name}}
						</view>
						<view class="shop_info_bottom" style="">
							<view class="shop_info_right_price">
								<span class="price_left">价格：</span>
								<span> <span class="price_bold">{{item.price}}</span> JPY</span>
							</view>
							<view class="shop_info_right_price" style="color: #979797; ">
								<span>x{{item.xian_num}}</span>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
			
		</view>
		<view v-if="order_info.status==1" class="btns_button">
			<view @click="tui_2_show = true" class="btns_button_item">
				<view class="btns_button_item_left">
					<image style="width: 44rpx; height: 44rpx;" src="../../static/vip/icon_33.png" mode=""></image>
					<span class="btn_1_left"> 全部退款 </span>
				</view>
				<view class="btns_button_item_right">
					<span class="btn_2_left"> 申请订单中所有商品退款</span>
					<u-icon name="arrow-right" color="#DDDDDD" size="20"></u-icon>
				</view>
				
			</view>
			<view @click="tui_1_show = true" class="btns_button_item">
				<view class="btns_button_item_left">
					<image style="width: 44rpx; height: 44rpx;" src="../../static/vip/icon_33.png" mode=""></image>
					<span class="btn_1_left"> 部分退款 </span>
				</view>
				<view class="btns_button_item_right">
					<span class="btn_2_left"> 申请将订单中部分商品退款</span>
					<u-icon name="arrow-right" color="#DDDDDD" size="20"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="tui_1_show"  mode="bottom" border-radius="14" >
			<!-- 部分退款 -->
			
			<view class="pop_top_box">
				<span style="opacity: 0;"><u-icon name="close" color="#1f2123" size="30"></u-icon></span>
				<span>部分退款</span>
				<span><u-icon @click="tui_1_show = false" name="close" color="#1f2123" size="30"></u-icon></span>
			</view>
			<view class="scroll_pop">
				<scroll-view scroll-y="true" style="flex: 1; overflow: hidden;">
					<view v-for="(item,index) in order_info.order_spec" :key="index" class="scroll_pop_item">
						<image @click="choose(index)" v-if="item.isChoose" src="../../static/vip/icon_36.png" style="width: 35rpx; height: 35rpx;margin-right: 30rpx;" mode=""></image>
						<image @click="choose(index)" v-else src="../../static/vip/icon_35.png" style="width: 35rpx; height: 35rpx;margin-right: 30rpx;" mode=""></image>
						<image :src="item.pic" style="width: 110rpx; height: 110rpx;" mode="aspectFit"></image>
						<view class="scroll_pop_item_right">
							<span class="scroll_pop_item_right_title">{{item.goods_name}}</span>
							<view class="item_right_bottom">
								<view class="" style="display: flex; flex-direction: column;">
									<span class="font_small_ccc">规格：{{item.sku}}</span>
									<span class="font_small_ccc">数量：{{item.num}}</span>
								</view>
								<u-number-box @change="valChange($event , index)" :disabled="item.xian_num<=0" v-model="item.tui_num" :min="0" :max="item.xian_num"></u-number-box>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="" style="display: flex; margin-top: 32rpx;padding: 0 25rpx;">
					<view class="textare_box" style="">
						<textarea style="padding: 15rpx; font-size: 24rpx;" v-model="text_tui"  maxlength="1000" placeholder="请输入退款原因" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			<view class="" style="display: flex; align-items: center; justify-content: center; padding: 30rpx; ">
				<u-button :ripple="true" type="error" style="width: 100%;" ripple-bg-color="#909399" @click="tui_any">提交申请</u-button>
			</view>
		</u-popup>
		<u-popup v-model="tui_2_show" mode="bottom" border-radius="14">
			<!-- 全部退款 -->
			<view class="pop_top_box">
				<span style="opacity: 0;"><u-icon name="close" color="#1f2123" size="30"></u-icon></span>
				<span>全部退款</span>
				<span><u-icon @click="tui_2_show = false" name="close" color="#1f2123" size="30"></u-icon></span>
			</view>
			<view class="scroll_pop" style="height: 40vh;">
				<view class="" style="display: flex; margin-top: 32rpx;padding: 0 25rpx;">
					<!-- <span style="padding-top: 15rpx; font-size: 24rpx;">退款原因:</span> -->
					<view class="textare_box" style="">
						<textarea style=" font-size: 30rpx;  width:100%; " v-model="text_tui_all"  maxlength="1000" placeholder="请输入退款原因" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			
			<view class="" style="display: flex; align-items: center; justify-content: center; padding: 30rpx; ">
				<u-button :ripple="true" type="error" style="width: 100%;" @click="tui_all" ripple-bg-color="#909399">提交申请</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import upload from '@/componts/upload/upload.vue';
	import back from '@/componts/back.vue';
	export default {
		components:{
			upload,
			back
		},
		data() {
			return {
				text_tui:'',
				text_tui_all:"",
				tui_1_show:false,
				tui_2_show:false,
				order_id:null,
				order_info:{},
				coupon_info:null,
				pic_list:[],
				style:{},
				background:{}
			}
		},
		onLoad(e) {
			
			this.order_id = e.id
			this.getDetail(e.id)
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			this.background = {
				 'background':`
				 radial-gradient(circle at top left, ${this.style.color8} 0%, transparent 60%), 
				 radial-gradient(circle at top right, ${this.style.color9} 0%, transparent 40%),
				 radial-gradient(circle at bottom left, #f6f6f6 0%, transparent 40%),
				 radial-gradient(circle at bottom right, #f6f6f6 0%, transparent 40%)`,
				'backgroundBlendMode': 'screen', /* 混合模式优化颜色过渡 */
			}
		},
		methods: {
			valChange(e , index){
				console.log(e , index)
				if(e.value>0){
					this.order_info.order_spec[index].isChoose = true
				}else{
					this.order_info.order_spec[index].isChoose = false
				}
			},
			choose(index){
				this.order_info.order_spec[index].isChoose = !this.order_info.order_spec[index].isChoose
			},
			tui_all(){
				var data = {
						"id":this.order_id,
						"apply_type":1,
						"apply_reason":this.text_tui_all,
					}
				if(!data.apply_reason){
					uni.showToast({
						title:'请填写退款原因',
						icon:"none"
					})
					return
				}
				this.$wqzApi.application_refund_all(data).then(res=>{
					uni.showToast({
						title:"申请成功",
						icon:'success'
					})
					this.getDetail(this.order_id)
					this.tui_2_show = false
				})	
				
			},
			tui_any(){
				var arr = []
				
				var tui_list = []
				this.order_info.order_spec.forEach((item,index)=>{
					if(item.tui_num>0 && item.isChoose){
						var text = `${item.id}:${item.tui_num}`
						 tui_list.push(text)
					}
				})
				if(tui_list.length<=0){
					uni.showToast({
						title:'请选择退款商品',
						icon:'none'
					})
					return
				}
				
				if(!this.text_tui){
					uni.showToast({
						title:'请填写退款原因',
						icon:"none"
					})
					return
				}
				var data  = {
					"id":this.order_id,
					"apply_type":1,
					"apply_reason":this.text_tui,
					"order_goods_spec_list":tui_list.join(','),
				}
				this.$wqzApi.application_refund_part(data).then(res=>{
					uni.showToast({
						title:"申请成功",
						icon:'success'
					})
					this.getDetail(this.order_id)
					this.tui_1_show = false
				})
			},
			
			getDetail(id){
				this.$gugoApi.GoodsOrder_detail({id:id}).then(res=>{
					res.data.order_spec.map((item,index)=>{
						var pic_list = item.goods_data.pic.split(',')
						item.goods_data.pic = pic_list[0]
						item.xian_num = item.num-item.refund_num
						item.tui_num = 0
						item.isChoose = false
					})
					this.order_info = res.data
				})

			},
			fileChange(e){
				this.pic_list = e
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./refund_shouHou.css);
</style>
